<template>
  <el-date-picker
    v-model="selectedDataTime"
    :type="this.periodType==='year'?'year':'month'"
    :value-format="finalValueFormat"
    :editable="editable"
    :clearable="clearable"
    placeholder="选择报告期"
    @change="onSelectChange"
    :picker-options="{disabledDate: disabledDateFn}"
  >
  </el-date-picker>
</template>

<script>

import moment from "moment/moment";

export default {
  name: "DataTimeSelect",
  props: {
    value: String,

    //存储key
    cacheKey: {
      type: String,
      default: 'dataTime'
    },

    //是否使用缓存
    useCache: {
      type: Boolean,
      default: true
    },
    //期别 month月 quarter季度 halfYear半年 year年
    periodType: {
      type: String,
      default: 'month'
    },
    //是否允许清除选项
    clearable: {
      type: Boolean,
      default: false
    },
    editable: {
      type: Boolean,
      default: false
    },
    valueFormat: {
      type: String,
      default: 'yyyy-MM'
    }
  },

  data() {
    return {
      selectedDataTime: '',

      allowMonths: {
        year: ['12'],
        halfYear: ['06', '12'],
        quarter: ['03', '06', '09', '12'],
        month: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
      },
    };
  },
  computed: {
    finalValueFormat() {
      return this.periodType === 'year' ? 'yyyy-12' : 'yyyy-MM';
    },
    finalCacheKey() {
      if (this.periodType === 'month') {
        return this.cacheKey;
      }
      return this.periodType + '_' + this.cacheKey;
    }
  },
  created() {
    //设置默认值
    if (!this.value) {
      //缓存时间
      let defaultDataTime = moment().subtract(1, 'months').format(this.finalValueFormat);
      //季度
      if (this.periodType === 'quarter') {
        //月份为上个月起最近的月
        let month = parseInt(moment().subtract(1, 'months').format('MM')) % 3;
        defaultDataTime = moment().subtract(month + 1, 'months').format(this.finalValueFormat);
      }
      //半年
      if (this.periodType === 'halfYear') {
        //月份为上个月起最近的月
        let month = parseInt(moment().subtract(1, 'months').format('MM')) % 6;
        defaultDataTime = moment().subtract(month + 1, 'months').format(this.finalValueFormat);
      }

      //设置值
      if (this.useCache) {
        let cacheKey = this.finalCacheKey;
        this.selectedDataTime = localStorage.getItem(cacheKey) || defaultDataTime;
      } else {
        this.selectedDataTime = defaultDataTime;
      }

      //变更事件
      this.onSelectChange(this.selectedDataTime);
    } else {
      this.selectedDataTime = this.value;
    }
  },
  methods: {
    onSelectChange(value) {
      if (this.useCache) {
        let cacheKey = this.finalCacheKey;
        localStorage.setItem(cacheKey, value)
      }
      this.$emit("input", value);
      this.$emit("change", value);
    },
    disabledDateFn(date) {
      let allowMonth = this.allowMonths[this.periodType];
      if (!allowMonth) {
        return false;
      }
      let month = moment(date).format('MM');
      return allowMonth.indexOf(month) < 0;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
